<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="140px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="考评任务名称" prop="provinceId">
            <el-select v-model="queryParams.name" placeholder="请选择考评任务名称" filterable clearable @change="changeKpk"
              style="width: 400px">
              <el-option v-for="item in optionTaskData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="专家评分截止日期:" prop="endDate">
            <el-date-picker clearable v-model="queryParams.endDate" type="date" disabled style="width: 400px"
              value-format="YYYY-MM-DD" placeholder="提醒专家评分的截止日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form ref="dataList" :model="form" class="tableForm" :rules="rules" label-width="120px" label-position="top">
      <el-row>
        <el-col>
          <el-table :data="form.dataList" border class="borderTable">
            <el-table-column label="序号" align="center" type="index" width="55" />
            <el-table-column label="预评估任务名称" align="center" prop="ypgId">
              <template #default="scope">
                <span>{{ scope.row.ypgName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="简本报告" align="center" prop="jbReportId" :show-overflow-tooltip="true">
              <template #default="scope">
                <span style="color: var(--el-color-primary);cursor: pointer;" @click="
                  handleDownload('0', '2', scope.row.jbReportId, scope.row.jbReportName, scope.row.ypgId)">
                  {{ scope.row.jbReportName }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="详本报告" align="center" prop="xbReportId" :show-overflow-tooltip="true">
              <template #default="scope">
                <span style="color: var(--el-color-primary);cursor: pointer;" @click="
                  handleDownload('1', '2', scope.row.xbReportId, scope.row.xbReportName, scope.row.ypgId)">
                  {{ scope.row.xbReportName }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="现场调查报告" align="center" prop="xcdcReportId" :show-overflow-tooltip="true"
              class-name="small-padding fixed-width">
              <template #default="scope">
                <span style="color: var(--el-color-primary);cursor: pointer;" @click="
                  handleDownload('3', '2', scope.row.xcdcReportId, scope.row.xcdcReportName, scope.row.ypgId)">
                  {{ scope.row.xcdcReportName }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
              <template #default="scope">
                <span v-if="scope.row.status == 0">待评分</span>
                <span v-if="scope.row.status == 1">待提交</span>
                <span v-if="scope.row.status == 2">已提交</span>
                <span v-if="scope.row.status == 3">停止评分</span>
              </template>
            </el-table-column>
            <el-table-column label="总得分（系统评分+专家评分）" prop="score" align="center">
              <template #default="scope">
                <!-- <el-form-item
                  v-if="scope.row.show"
                  :rules="rules.score"
                  :prop="`dataList.${scope.$index}.score`"
                  label-width="0px"
                >
                  <el-input
                    v-model.number="scope.row.score"
                    placeholder="请输入"
                  />
                </el-form-item> -->
                <span>{{ scope.row.score }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button type="text" v-if="scope.row.status == 0" @click="handleScore(scope.row)">评分</el-button>
                <el-button type="text" v-if="scope.row.status == 1" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button type="text" v-if="scope.row.status == 1" @click="handleSubmit(scope.row)">提交</el-button>
                <el-button type="text" v-if="scope.row.status == 2 || scope.row.status == 3"
                  @click="handleView(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script setup name="expertScore">
import {
  getList,
  glTaskList,
  glTaskDetails,
  glTaskCommit,
} from "@/api/workEvaluation/appraisalTaskManagement/expertScoreManage.js";
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
const router = useRouter();
const data = reactive({
  queryParams: {
    page: 1,
    rows: 10,
    name: "",
  },
  form: {
    dataList: [],
    page: 1,
    rows: 10,
  },
});
const validatorFactror = (rule, value, callback) => {
  const reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
  if (!reg.test(value)) {
    callback(new Error("只能输入数字"));
  }
  callback();
};
const rules = ref({
  score: [
    {
      required: true,
      message: "请输入数字",
      trigger: "blur",
      validator: validatorFactror,
      type: "number",
    },
  ],
});
const optionTaskData = ref([]);
const { queryParams, form } = toRefs(data);
onActivated(() => {
  getData()
  changeKpk()
})
// 查询考评任务列表接口
const getData = () => {
  getList().then((res) => {
    if (res.code == 200) {
      optionTaskData.value = res.data;
      if (res.data[0]) {
        queryParams.value.name = res.data[0].id;
      } else {
        queryParams.value.name = "";
      }
      getTaskList();
    }
  });
};
// 查询列表
const getTaskList = () => {
  glTaskList({ krtId: queryParams.value.name }).then((res) => {
    form.value.dataList = res.data?.glTask;
    queryParams.value.endDate = res.data?.endDate;
  });
};
// 点击评分
const handleScore = (val) => {
  router.push({
    path: "/workEvaluation/appraisalTaskManagement/detailIndex",
    query: {
      active: 5,
      krtytId: val.id,
      status: "update",
    },
  });
};
// 点击修改
const handleUpdate = (val) => {
  val.show = true;
  router.push({
    path: "/workEvaluation/appraisalTaskManagement/detailIndex",
    query: {
      active: 5,
      krtytId: val.id,
      status: "update",
    },
  });
};
// 提交
const handleSubmit = (val) => {
  proxy.$refs["dataList"].validate((valid) => {
    if (valid) {
      glTaskCommit({ krtytId: val.id }).then((res) => {
        if (res.code == 200) {
          proxy.$modal.msgSuccess("提交成功");
          getData();
        }
      });
    } else {
      return false;
    }
  });
};
// 查看
const handleView = (val) => {
  // let obj={}
  // glTaskDetails({krtytId:val.id}).then(res=>{
  //   console.log(res)
  //   obj = res.data;
  //     router.push({
  //     path: "/workEvaluation/appraisalTaskManagement/detailIndex",
  //     state:{
  //       active:5,
  //       data:JSON.stringify(obj),
  //       krtytId:val.id,
  //       status:'view'
  //     }
  //   });
  // })
  router.push({
    path: "/workEvaluation/appraisalTaskManagement/detailIndex",
    query: {
      active: 5,
      krtytId: val.id,
      status: "view",
    },
  });
};
// 点击报告下载
function handleDownload(type, def, rowId, name, ypgId) {
  let str = name.split('.')[0]
  if (type == '3') {
    proxy.download('/fxfzypg/dataVolume/downloadReportXc', {
      reportId: rowId,
    }, str + `.pdf`)
    // location.href = import.meta.env.VITE_APP_BASE_API + "/fxfzypg/dataVolume/downloadReportXc?reportId="+ encodeURIComponent(rowId);
  } else {
    proxy.download('/fxfzypg/dataVolume/downloadReport', {
      ypgId: ypgId,
      flag: type
    }, str + `.pdf`)
    // location.href = import.meta.env.VITE_APP_BASE_API + "/fxfzypg/dataVolume/downloadReport?ypgId="+ encodeURIComponent(ypgId)+'&flag='+encodeURIComponent(type);
  }
}

const changeKpk = () => {
  getTaskList()
};
onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped>
:deep(.el-table).borderTable td.el-table__cell {
  border-bottom: 1px solid #ebeef5 !important;
  border-right: 1px solid #ebeef5 !important;

  .cell {
    // height: 60px;
    // line-height: 60px;

    .el-form-item {
      position: relative;
      top: 18px;

      .el-input__suffix {
        top: 9px;
      }
    }
  }
}

:deep(.el-table__append-wrapper) {
  text-align: center;
}
</style>
